<template>
  <section class="activeItem">
      <div class="fleetName">
              <img :src="item.fleet.head ? addPath(item.fleet.head): favicon" alt=""><span> {{item.fleet&&item.fleet.name}} </span>
            </div>
            <div class="main">
            <div class="left">
              <div class="title">{{ item.title }}</div>
              <div class="content little-info">
                <span>
                  <img :src="position_icon" class="img-icon" alt="">
                  <span v-if="item.address"> {{ item.address}}</span>
                  <span class="area" v-if="!item.address"> {{ item.address}}</span>
                </span>
              </div>
              <div class="content little-info">
                  <img :src="time_icon" class="img-icon" alt="">
                  <span class="date">{{ item.beginDate | sliceDate }}</span>
              </div>
              </div> 
              <div class="right">
              <img :src="item.cover ? addPath(item.cover) : defaultImg" width="100%" height="100%" />
              </div>
          <div class="attend" v-if="item.hasAttend === '1'">
            <span>已报名</span>
          </div>
          <div class="attend-1" v-if="item.hasAttend === '0'">
            <span>未报名</span>
          </div>
            </div>
          <div class="bottom">
                <div class="bottom-left">
                  <span>{{item.time}}</span>
                </div>
                <div class="bottom-right">
                  <span><i class="iconfont icon-renyuan"></i> {{item.attendNumber}}</span>
                  <span><i class="iconfont icon-guanzhurenshu11"></i>  {{item.fleet.followCount}}</span>
                </div>
              </div>
  </section>
</template>
<script>
// image
import position_icon from "assets/position.svg";
import time_icon from "assets/time_icon.svg";
import favicon from 'assets/favicon.png'
import defaultImg from "assets/default_user_icon.png";
export default {
  name:'active-item',
  data () {
      return {
        defaultImg,
        position_icon,
        time_icon,
        favicon
      }
  },
  props:{
      item:Object
  },
  methods: {
      
  }
}
</script>
<style lang="scss" scoped>

.main {
  display: flex;
  background-color: #fff;
  padding: 15px 10px 5px;
  position: relative;
}
.fleetName {
  background: #fff;
  padding: 0 10px;
  padding-top: 10px;
}
.fleetName span{
  position: relative;
  left: 5px;
  top: -2px;
}
.fleetName img{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  margin-top: 2px;
}
.bottom{
  display: flex;
  background-color: #FFF;
  padding: 0 10px 5px;
}
.bottom .bottom-left{
  flex: 0 0 50vw;
}
.bottom .bottom-right{
  flex: 1;
  display: flex;
}
.bottom .bottom-right span{
  flex: 1;
  text-align: center;
}
.content {
  margin-top: 10px;
  display: flex;
}
.content .content-left {
  flex: 1;
}
.title {
  font-size: 14px;
  font-weight: bold;
}
.content .content-left span {
  margin-left: 5px;
}
.content .content-right {
  flex: 0 0 40px;
}
.result_empty {
  background-color: #f8f8f8;
}
.left {
  flex: 1;
}
.right {
  flex: 0 0 120px;
}
.col-50 img {
  object-fit: cover;
}
.iconfont.icon-dingwei {
  &:before {
    position: relative;
    top: -2.5px;
  }
}
.iconfont > span {
  position: relative;
  color: #999;
  top: -3px;
  left: -3px;
}
.iconfont > span.area {
  left: -11px;
}
.iconfont > .date {
  position: relative;
  top: -3px;
  left: 3px;
}
p {
  font-size: 14px;
}
.attend {
  width: 85px;
  height: 70px;
  background-image: url("../assets/label.png");
  text-align: center;
  position: absolute;
  top: -10px;
  right: 10px;
}
.attend span {
  display: inline-block;
  margin-top: 44px;
  margin-left: 10px;
}
.attend-1 {
  width: 85px;
  height: 69px;
  background-image: url("../assets/label-1.png");
  text-align: center;
  position: absolute;
  top: -10px;
  right: 10px;
}
i {
  display: inline-block;
  // color: #f98700;
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 16px;
  text-align: center;
  margin: 0;
  padding: 0;
}
.attend-1 span {
  display: inline-block;
  margin-top: 44px;
  margin-left: 10px;
  color: #fff;
}
.little-info {
  display: flex;
  font-size: 13px;
  span:first-child {
    padding-right: 10px;
  }
  span {
    display: flex;
    align-items: center;
  }
  .img-icon {
    width: 19px;
  }
}
</style>


